<!DOCTYPE html>
<html>

<head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>

<body>





    <a-scene>
        <a-assets>
            <img id="testImg"
                src=""
                alt="">

            <img id="skyImg"
                src=""
                alt="">

            <a-asset-item id="model" src="https://cdn.jsdelivr.net/npm/electroluxasset/model/scene/scene.gltf"></a-asset-item>
        <!-- 重要：a-mixin贼好用 -->
            <a-mixin id="blue" material="color:blue"></a-mixin>
        
        
        </a-assets>

        <!-- aframe 我们高度在1m左右，然后站在原点向着z的负轴看 -->
        <!-- 
            1.a-image计算公式
            1.1. width 设置成 1
            1.2. height = (width / img width px) * img height px
        -->

        <!-- <a-image src="#testImg" position="0 1.5 -1" width="1.024" height="0.768" scale="1 1 1">

        </a-image> -->


        <!--
            2. a-curvedimage
        -->
        <!-- <a-curvedimage src="#testImg" position="0 1.5 -1" theta-length="90" theta-start="135" scale="1 1 1" radius="2">
        </a-curvedimage> -->

        <!-- 
            3.entity 没有行为和形状
            geometry :cylinder box
            shader:standard flat
        -->

        <!-- <a-entity geometry="primitive :cylinder" position="1 0.5 -4" material="shader:standard
            ;color : rgb(0,0,0)
        "></a-entity> -->


        <!-- 4.a-plane 属性
            rotation8 第一个值好像只能-90
            repeat 指的是 在 x y轴上 分别重复5次
        -->
        <!-- <a-plane  material="src: #testImg; color:rgb(80,0,0)" rotation="-90 0 0" scale="10 10 1" position="0 -1.5 -6" >
        </a-plane> -->
        <a-plane mixin="blue" material="src: #testImg; repeat:10 10" shadow="receive:true" rotation="-90 0 0" scale="100 100 100" position="0 0.3 -3">
        </a-plane>


        <!--
            5.a-sky 属性
            side: double"
            radius="5"
            如果用  http://texturify.com/stock-photo/winter-in-the-forest-at-the-seashore-10592.html
            一行就可以实现全景效果
        -->
        <a-sky material="src:#skyImg"></a-sky>


        <!--
            6.a-camera 属性
            vr 模式下面初始 位置 是 0 0 0
            desktop 模式下面 位置 是 0 1.6 0

            套在a-entity 里面那么 高度会加上
            要是 单独一个标签 那么就是绝对位置
            active 可以设置活动相机
        -->

        <!-- <a-entity position="0 0 0">
            <a-camera   active="true"></a-camera> 
        </a-entity>
        <a-camera  position="0 2.6 0" active="false" ></a-camera> -->


        <a-entity position="0 0 0">
            <a-camera ></a-camera> 
        </a-entity>
        <!-- 7.gltf-model 加载3d模型 -->
        <a-entity position="0 0 0" gltf-model="#model" shadow="cast:true"> 
            
        </a-entity>



        <!-- 8.光照属性
            type:ambient 散射光
            惊了，ctrl + alt + i 可以打开 aframe 视图
            type = point 是类似于 台灯的效果
            distance 属性也很好玩
            阴影需要设置 receive:true 和  cast:true
        -->
        <a-entity position="0 0 0" light="type:ambient;color:rgb(240,240,240)"></a-entity> 
        <a-entity id="redLight" position="0 0 0" light=""></a-entity> 
        <!-- <a-entity position="0 3 0" light="intensity:1;
        color:rgb(255,255,255)"
        position="0 1 1"
        ></a-entity>  -->
            
    </a-scene>
</body>

</html>